<template>
  <div class="data-wrapper" ref="dashboardContainer">
    <div class="data-header">
      <div class="data-header-item"><xyTime></xyTime></div>
      <div class="data-header-item">
        <!-- <div class="data-header-item-logo">
          <svg-icon
            icon-class="tempLogo"
            style="width: 30px; height: 30px; padding-left: 3px"
          ></svg-icon>
        </div> -->
        <div class="platform-title">智能暖通物联网云平台</div>
      </div>
      <div
        class="data-header-item data-header-item-wrapper"
        @click="toggleFullscreen"
      >
        <div class="fullscreen-button">
          <svg-icon
            :icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'"
            class="fullscreen-icon"
          ></svg-icon>
        </div>
      </div>
    </div>
    <el-row :gutter="16">
      <el-col :span="6">
        <div class="data-item">
          <xy-border
            :style="{ height: 'calc((100vh - 50px - 15px * 4) / 3 - 40px)' }"
            type="head"
            ><dataStatistics
              title="设备状态预览"
              :dataObject="DeviceData"
              type="column"
              iconClass="DataIcon"
            ></dataStatistics
          ></xy-border>
        </div>
        <div class="data-item">
          <xy-border
            :style="{ height: 'calc((100vh - 50px - 15px * 4) / 3)' }"
            type="item"
          >
            <data-top
              :listrArray="groupEnergy"
              title="分组能耗TOP5"
              svgIcon="top"
              @handleView="handleView"
            ></data-top
          ></xy-border>
        </div>
        <div class="data-item">
          <xy-border
            :style="{ height: 'calc((100vh - 50px - 15px * 4) / 3)' }"
            type="item"
            ><data-top
              :listrArray="groupEnergy"
              title="分组加热时长TOP5"
              svgIcon="dashboard-2"
              @handleView="handleView"
            ></data-top
          ></xy-border></div
      ></el-col>
      <el-col :span="12">
        <div class="data-item">
          <xy-border
            :style="{ height: 'calc((100vh - 50px - 15px * 4) / 3 - 130px)' }"
            type="head"
            ><dataStatistics
              title="今日数据统计"
              :dataObject="TodayCount"
              type="row"
              iconClass="ElecIcon"
            ></dataStatistics
          ></xy-border>
        </div>
        <div class="data-item">
          <xy-border
            :style="{ height: 'calc((100vh - 50px - 15px * 4) / 3 + 45px)' }"
            type="item"
            ><dataEnergyConsumption
              title="能耗同比分析"
              svgIcon="EnergyConsumption"
            ></dataEnergyConsumption
          ></xy-border>
        </div>
        <div class="data-item">
          <xy-border
            :style="{ height: 'calc((100vh - 50px - 15px * 4) / 3 + 45px)' }"
            type="item"
            ><dataTodayTempreture
              title="今日温度趋势"
              svgIcon="EnergyConsumption"
            ></dataTodayTempreture
          ></xy-border></div
      ></el-col>
      <el-col :span="6">
        <div class="data-item">
          <xy-border
            :style="{ height: 'calc((100vh - 50px - 15px * 4) / 3 - 40px)' }"
            type="head"
            ><dataStatistics
              title="累计数据统计"
              :dataObject="TotalCount"
              type="column"
              iconClass="AsitiIcon"
            ></dataStatistics
          ></xy-border>
        </div>
        <div class="data-item">
          <xy-border
            :style="{ height: 'calc((100vh - 50px - 15px * 4) / 3)' }"
            type="item"
            ><data-top
              :listrArray="groupEnergy"
              title="设备运行效率TOP5"
              svgIcon="deviceManagement"
              @handleView="handleView"
            ></data-top
          ></xy-border>
        </div>
        <div class="data-item">
          <xy-border
            :style="{ height: 'calc((100vh - 50px - 15px * 4) / 3)' }"
            type="item"
            ><dataWarning
              title="告警信息列表"
              svgIcon="dashboard-5"
              num="12"
              @handleView="handleView"
            ></dataWarning
          ></xy-border></div
      ></el-col>
    </el-row>
    <el-dialog
      :visible.sync="dialogVisible"
      width="800px"
      custom-class="data-dailog"
      :popper-append-to-body="false"
      :modal-append-to-body="false"
      :append-to-body="false"
    >
      <dataTable
        @onClose="
          () => {
            dialogVisible = false;
          }
        "
      >
      </dataTable>
    </el-dialog>
  </div>
</template>
<script>
import xyBorder from "../components/xy-border.vue";
import xyTime from "../components/xy-time.vue";
import dataStatistics from "../components/data-statistics.vue";
import dataTop from "../components/data-top.vue";
import dataWarning from "../components/data-warning.vue";
import dataEnergyConsumption from "../components/data-energy-consumption.vue";
import dataTodayTempreture from "../components/data-today-tempreture.vue";
import dataTable from "../components/data-table.vue";
export default {
  name: "DataDashboard",
  data() {
    return {
      isFullscreen: false,
      dialogVisible: false,
      DeviceData: [
        {
          name: "设备总数",
          icon: "dashboard-8",
          Number: "12,500",
          compareText: "",
          compare: "",
          unit: "台",
        },
        {
          name: "在线数量",
          icon: "dashboard-7",
          Number: "12,358",
          compareText: "在线率",
          compare: "",
          unit: "台",
        },
        {
          name: "离线数量",
          icon: "dashboard-6",
          Number: "142",
          compareText: "",
          compare: "",
          unit: "台",
        },
        {
          name: "报警数量",
          icon: "dashboard-5",
          Number: "28",
          compareText: "",
          compare: "",
          unit: "台",
        },
      ],
      TodayCount: [
        {
          name: "今日用电量",
          icon: "dashboard-4",
          Number: "185,420",
          compareText: "较昨日增长",
          compare: "5.1%",
          unit: "kwh",
          compareIcon: "el-icon-top",
        },
        {
          name: "今日电费",
          icon: "dashboard-3",
          Number: "148,336",
          compareText: "较昨日增长",
          compare: "98.9%",
          unit: "元",
          compareIcon: "el-icon-top",
        },
        {
          name: "今日加热时长",
          icon: "dashboard-2",
          Number: "342680",
          compareText: "较昨日增长",
          compare: "5.1%",
          unit: "小时",
          compareIcon: "el-icon-top",
        },
        {
          name: "平均温度",
          icon: "dashboard-1",
          Number: "28",
          compareText: "设定温度",
          compare: "23.5",
          unit: "℃",
          compareIcon: "el-icon-right",
        },
      ],
      TotalCount: [
        {
          name: "累计电量",
          icon: "dashboard-4",
          Number: "45,892,170",
          compareText: "本月累计增长",
          compare: "15",
          unit: "kwh",
          compareIcon: "el-icon-top",
        },
        {
          name: "累计电费",
          icon: "dashboard-3",
          Number: "36,713,736",
          compareText: "本月累计增长",
          compare: "55%",
          unit: "小时",
          compareIcon: "el-icon-top",
        },
        {
          name: "累计加热时长",
          icon: "dashboard-2",
          Number: "142",
          compareText: "本月累计增长",
          compare: "6.5%",
          unit: "台",
          compareIcon: "el-icon-top",
        },
        {
          name: "累计节能",
          icon: "dashboard-9",
          Number: "1,145,680",
          compareText: "较去年同期",
          compare: "12.3",
          unit: "kwh",
          compareIcon: "el-icon-top",
        },
      ],
      groupEnergy: [
        {
          value: 1,
          name: "商业中心区",
          number: "25,540kWh",
        },
        {
          value: 2,
          name: "住宅区A区",
          number: "25,360kWh",
        },
        {
          value: 3,
          name: "办公区域",
          number: "22,890kWh",
        },
        {
          value: 4,
          name: "住宅区B区",
          number: "20,360kWh",
        },
        {
          value: 5,
          name: "酒店区域",
          number: "19,360kWh",
        },
      ],
    };
  },
  components: {
    xyBorder,
    xyTime,
    dataStatistics,
    dataTop,
    dataWarning,
    dataEnergyConsumption,
    dataTodayTempreture,
    dataTable,
  },
  methods: {
    handleView() {
      this.dialogVisible = true;
    },
    toggleFullscreen() {
      if (!this.isFullscreen) {
        this.enterFullscreen();
      } else {
        this.$router.back();
      }
    },
    // 页面加载时自动进入全屏
    autoEnterFullscreen() {
      this.$nextTick(() => {
        setTimeout(() => {
          this.enterFullscreen();
        }, 100);
      });
    },
    enterFullscreen() {
      const element = this.$refs.dashboardContainer;

      // 检查是否支持全屏API
      if (
        !document.fullscreenEnabled &&
        !document.webkitFullscreenEnabled &&
        !document.mozFullScreenEnabled &&
        !document.msFullscreenEnabled
      ) {
        console.warn("全屏功能不被支持");
        return;
      }

      // 尝试进入全屏
      if (element.requestFullscreen) {
        element.requestFullscreen().catch((err) => {
          console.error("全屏请求失败:", err);
        });
      } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen();
      } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
      } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen();
      }
      this.isFullscreen = true;
    },

    exitFullscreen() {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
      }
      this.isFullscreen = false;
    },

    handleFullscreenChange() {
      // 监听全屏状态变化
      this.isFullscreen = !!(
        document.fullscreenElement ||
        document.mozFullScreenElement ||
        document.webkitFullscreenElement ||
        document.msFullscreenElement
      );
    },
  },
  mounted() {
    // 监听全屏状态变化事件
    document.addEventListener("fullscreenchange", this.handleFullscreenChange);
    document.addEventListener(
      "mozfullscreenchange",
      this.handleFullscreenChange
    );
    document.addEventListener(
      "webkitfullscreenchange",
      this.handleFullscreenChange
    );
    document.addEventListener(
      "msfullscreenchange",
      this.handleFullscreenChange
    );
    // 页面加载时自动进入全屏
    this.autoEnterFullscreen();
  },

  beforeDestroy() {
    // 移除事件监听器
    document.removeEventListener(
      "fullscreenchange",
      this.handleFullscreenChange
    );
    document.removeEventListener(
      "mozfullscreenchange",
      this.handleFullscreenChange
    );
    document.removeEventListener(
      "webkitfullscreenchange",
      this.handleFullscreenChange
    );
    document.removeEventListener(
      "msfullscreenchange",
      this.handleFullscreenChange
    );
  },
};
</script>
<style scoped lang="scss">
.data-wrapper {
  width: auto;
  color: #fff;
  height: 100vh;
  padding: 0 15px;
  background: radial-gradient(ellipse at center, #1a202c, #0a1120 100%);
  .data-header {
    width: 100%;
    height: 80px;
    border-bottom: 1px solid rgba(59, 130, 246, 0.2);
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .data-header-item {
      width: 33.33%;
      display: flex;
      align-items: center;
    }
    .data-header-item-wrapper {
      justify-content: flex-end;
    }
    .data-header-item-logo {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: linear-gradient(45deg, #4f46e5, #10b981);
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .platform-title {
      font-size: 30px;
      font-weight: 700;
      background: linear-gradient(45deg, #4f46e5, #10b981);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-shadow: 0 0 10px rgba(79, 70, 229, 0.3);
      letter-spacing: 1px;
      margin: 0 auto;
    }
    .fullscreen-button {
      justify-content: flex-end;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 42px;
      height: 42px;
      background: rgba(59, 130, 246, 0.1);
      border-radius: 16px;
      border: 1px solid rgba(59, 130, 246, 0.3);
      box-shadow: 0 0 10px rgba(59, 130, 246, 0.2);
      .fullscreen-icon {
        font-size: 20px;
        width: 20px;
        height: 20px;
        cursor: pointer;
        color: #cbd5e1;
      }
    }
  }
  .data-item {
    margin-top: 15px;
  }
}
</style>
<style lang="scss">
.data-wrapper {
  .el-dialog__wrapper {
    background-color: rgba(0, 0, 0, 0.6);
  }
  .el-dialog.data-dailog {
    margin-top: 15vh !important;
    .el-dialog__header,
    .el-dialog__footer {
      display: none !important;
    }
    .el-dialog__body {
      background: linear-gradient(
        135deg,
        rgba(30, 41, 59, 0.98),
        rgba(26, 32, 44, 0.98)
      );
      padding-bottom: 20px;
      border: 1px solid rgba(59, 130, 246, 0.2);
      box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
    }
  }
}
</style>
